---
slug: api
title: Highway - API Reference
layout: default
next_url: examples/disable.html
next_label: Examples
---

<h1>API</h1>

<h2>Hooks/Methods</h2>
<h3 id="renderers"><a href="#renderers">Renderers</a></h3>
<p>Renderers have a number of hooks/methods available to structure them and call pieces of Javascript at key moments on navigation. Read more of the <a href="{{ site.url }}/get-started.html#renderers">documentation</a> about renderers.</p>

<div class="table-wrapper">
  <table cellpadding="0" cellspacing="0">
    <tr>
      <th width="25%">Methods</th>
      <th>Details</th>
    </tr>
    <tr>
      <td><code>onEnter()</code></td>
      <td>This method in the renderer is run when the <code>data-router-view</code> is added to the DOM Tree.</td>
    </tr>
    <tr>
      <td><code>onLeave()</code></td>
      <td>This method in the renderer is run when transition to hide the <code>data-router-view</code> is called.</td>
    </tr>
    <tr>
      <td><code>onEnterCompleted()</code></td>
      <td>This method in the renderer is run when the transition to display the <code>data-router-view</code> is done.</td>
    </tr>
    <tr>
      <td><code>onLeaveCompleted()</code></td>
      <td>This method in the renderer is run when the <code>data-router-view</code> is removed from the DOM Tree.</td>
    </tr>
  </table>
</div>

<h3 id="transitions"><a href="#transitions">Transitions</a></h3>
<p>Transitions have a number of hooks/methods available to manage which animations should be run to display a page and which one should be run to hide it. Read more of the <a href="{{ site.url }}/get-started.html#transitions">documentation</a> about transitions.</p>

<div class="table-wrapper">
  <table cellpadding="0" cellspacing="0">
    <tr>
      <th width="30%">Methods</th>
      <th width="25%">Method Parameters</th>
      <th>Details</th>
    </tr>
    <tr>
      <td><code>in({ from, to, trigger, done })</code></td>
      <td>
        <code>to | &lt;Node&gt;</code><br>
        <code>from | &lt;Node&gt;</code><br>
        <code>done | &lt;Callback&gt;</code><br>
        <code>trigger | &lt;Node|String&gt;</code>
      </td>
      <td>
        <p>This method is called to display the <code>data-router-view</code> under the <code>to</code> parameter and, for overlaping transitions only, to hide the <code>data-router-view</code> under the <code>from</code> parameter. Once the animation is over the <code>done()</code> callback <strong>has to be called</strong> to continue the navigation process.</p>
        <p>The <code>trigger</code> parameter contains either the link triggering the transition, <code>popstate</code> when the back/forward button of the browser triggers the transition or <code>script</code> for programmatical redirection.</p>
      </td>
    </tr>
    <tr>
      <td><code>out({ from, trigger, done })</code></td>
      <td>
        <code>from | &lt;Node&gt;</code><br>
        <code>done | &lt;Callback&gt;</code><br>
        <code>trigger | &lt;Node|String&gt;</code>
      </td>
      <td>
        <p>This method is called to hide the <code>data-router-view</code> under the <code>from</code> parameter. Once the animation is over the <code>done()</code> callback <strong>has to be called</strong> to continue the navigation process.</p>
        <p>The <code>trigger</code> parameter contains either the link triggering the transition, <code>popstate</code> when the back/forward button of the browser triggers the transition or <code>script</code> for programmatical redirection.</p>
      </td>
    </tr>
  </table>
</div>

<h3 id="core"><a href="#core">Core</a></h3>
<p><code>Highway.Core</code> comes with some built-in and useful methods developers can have access to once it has been called with <code>new Highway.Core()</code>. Read more of the <a href="{{ site.url }}/get-started.html#core">documentation</a> about the core of Highway.</p>

<div class="table-wrapper">
  <table cellpadding="0" cellspacing="0">
    <tr>
      <th width="25%">Methods</th>
      <th width="25%">Method Parameters</th>
      <th>Details</th>
    </tr>
    <tr>
      <td><code>attach(links)</code></td>
      <td><code>links | &lt;Array|NodeList&gt;</code></td>
      <td>All links on a page that don't have the <code>target</code> attribute or the <code>data-router-disabled</code> attribute are attached to Highway by default. This methods can be used to programatically attach links to Highway.</td>
    </tr>
    <tr>
      <td><code>detach(links)</code></td>
      <td><code>links | &lt;Array|NodeList&gt;</code></td>
      <td>All links in a <code>data-router-view</code> that is hidden are detached from Highway by default. This methods can be used to programatically detach links from Highway.</td>
    </tr>
    <tr>
      <td><code>redirect(href, transition)</code></td>
      <td>
        <code>href | &lt;String&gt;</code><br>
        <code>transition | &lt;String&gt;</code>
      </td>
      <td>This method can be used to programatically redirect to an internal page with Highway. A transition key, as defined in your highway configuration, can be <strong>optionally</strong> added to the method to override the transition related to the page. The transition related to the page will be used if no transition is added to this method.</td>
    </tr>
  </table>
</div>

<h2 id="events"><a href="#events">Events</a></h2>
<p><code>Highway.Core</code> extends <a href="https://github.com/scottcorgan/tiny-emitter#readme" target="_blank">tiny-emitter</a> so it gives developers access to all the <a href="https://github.com/scottcorgan/tiny-emitter#instance-methods" target="_blank">methods</a> from <em>tiny-emitter</em>. Those methods can be used to listen to the following events sent by Highway in the navigation process.</p>
<div class="table-wrapper">
  <table cellpadding="0" cellspacing="0">
    <tr>
      <th width="25%">Events</th>
      <th width="25%">Callback Parameters</th>
      <th>Details</th>
    </tr>
    <tr>
      <td><code>NAVIGATE_IN</code></td>
      <td>
        <code>to | &lt;Node&gt;</code><br>
        <code>trigger | &lt;Node|String&gt;</code><br>
        <code>location | &lt;Object&gt;</code>
      </td>
      <td>This event is sent everytime a <code>data-router-view</code> is added to the DOM Tree. The callback method of the event gets an <code>Object</code> as a parameter that contains the <code>data-router-view</code> under the <code>to</code> key, the triggered element under the <code>trigger</code> key and all the URL informations under the <code>location</code> key.</td>
    </tr>
    <tr>
      <td><code>NAVIGATE_OUT</code></td>
      <td>
        <code>from | &lt;Node&gt;</code><br>
        <code>trigger | &lt;Node|String&gt;</code><br>
        <code>location | &lt;Object&gt;</code>
      </td>
      <td>This event is sent everytime the <code>out()</code> method of a transition is run to hide a <code>data-router-view</code>. The callback method of the event gets an <code>Object</code> as a parameter that contains the <code>data-router-view</code> under the <code>from</code> key, the triggered element under the <code>trigger</code> key and all the URL informations under the <code>location</code> key.</td>
    </tr>
    <tr>
      <td><code>NAVIGATE_END</code></td>
      <td>
        <code>to | &lt;Node&gt;</code><br>
        <code>from | &lt;Node&gt;</code><br>
        <code>trigger | &lt;Node|String&gt;</code><br>
        <code>location | &lt;Object&gt;</code>
      </td>
      <td>This event is sent everytime the <code>done()</code> method is called in the <code>in()</code> method of a transition. The callback method of the event gets an <code>Object</code> as a parameter that contains the new <code>data-router-view</code> under the <code>to</code> key, the old <code>data-router-view</code> under the <code>from</code> key, the triggered element under the <code>trigger</code> key and all the URL informations under the <code>location</code> key.</td>
    </tr>
  </table>
</div>
